<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <upImage @getUserImg="upUserImage"
                 ref="upImageRef"
                 class="upImage"></upImage>
        <span>管理员个人档案</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text"
                   @click="dialogVisible = true">修改电话信息</el-button>
      </div>
      <img :src="userInfo[0].studentImage"
           alt="还没上传照片，请上传">
      <div class="text item">
        <div class="left">
          <div>
            {{'姓名：' + userInfo[0].name}}
          </div>
          <div>
            {{'性别：' + userInfo[0].sex}}
          </div>
          <div>
            {{'宿舍楼：' + userInfo[0].tower}}
          </div>
          <div>
            {{'宿舍号：' + userInfo[0].dorm}}
          </div>
        </div>
        <div class="right">
          <div>
            {{'学号：' + userInfo[0].studentNumber}}

          </div>
          <div>
            {{'学院：' + userInfo[0].college}}
          </div>
          <div>
            {{'班级：' + userInfo[0].class}}
          </div>
          <div>
            {{'电话：' + userInfo[0].tel}}
          </div>
        </div>
      </div>
    </el-card>
    <!--修改信息dialog-->
    <el-dialog title="修改个人信息"
               :visible.sync="dialogVisible"
               width="30%">
      <!--dialog内容-->
      <el-form ref="form"
               label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="userInfo[0].name"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="userInfo[0].sex"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="userInfo[0].studentNumber"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="宿舍楼">
          <el-input v-model="userInfo[0].tower"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="宿舍号">
          <el-input v-model="userInfo[0].dorm"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="userInfo[0].college"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="userInfo[0].class"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="userInfo[0].tel"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="updaMangerInfoClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upImage from './upImage.vue'
export default {
  name: 'user',
  data () {
    return {
      userInfo: [],
      dialogVisible: false
    }
  },
  components: {
    upImage
  },
  created () {
    this.getUserInfo()
  },

  methods: {
    updaMangerInfoClick () {
      // 发起修改数据请求
      this.dialogVisible = false
    },
    async getUserInfo () {
      const { data: res } = await this.$axios.get('/student/findStudent', {
        params: {
          query: window.localStorage.getItem('studentNumber')
        }
      })
      console.log(res.result)
      if (res.meta.code === 200) {
        this.userInfo = res.result
        // console.log(this.userInfo)
      } else {
        return false
      }
    },
    async upUserImage (userImg) {
      if (!userImg) return
      const { data: res } = await this.$axios.post('/student/studentImg', {
        studentNumber: window.localStorage.getItem('studentNumber'),
        studentImage: userImg
      })
      if (res.code === 0) {
        this.$message.success(res.msg)
        this.getUserInfo()
        this.$refs.upImageRef.clearFiles()
      }
    }
  }
}

</script>
<style lang='less' scoped>
.box-card {
  .clearfix {
    position: relative;
    span {
      margin-left: 44%;
    }
    .upImage {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .item {
    margin: 0 50px;
    display: flex;
    justify-content: space-between;
    .left {
      flex: 1;
      div {
        margin: 20px 0;
      }
    }
    .right {
      flex: 1;
      div {
        margin: 20px 0;
      }
    }
  }
  img {
    position: relative;
    width: 100px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
  }
}
</style>
